import utils from "./utils";
import { formatterVehicleControlState } from "./conversion";

export function getStateStationTemplate(data) {
  return `<div class="echarts-tooltip">
                <div class="row row-1">
                  <p>${data.station ? data.station : "—"}</p>
                </div>
                <div class="row row-2">
                  <div class="col col-1">
                    <p class="ellipsis">AQI</p>
                  </div>
                  <div class="col col-2 ${utils.validateAqi(data.aqi)}">
                    <p class="ellipsis">${data.aqi ? data.aqi : "—"}</p>
                  </div>
                  <div class="col col-3">
                    <p class="ellipsis">空气等级</p>
                  </div>
                  <div class="col col-4 ${utils.validateAqi(data.aqi)}">
                    <p class="ellipsis">${data.quality ? data.quality : "—"}</p>
                  </div>
                </div>
                <div class="row row-3">
                  <div class="col col-1">
                    <p class="ellipsis">PM2.5</p>
                  </div>
                  <div class="col col-2 ${utils.validatePm2_5(data.pm2_5)}">
                    <p class="ellipsis">${data.pm2_5 ? data.pm2_5 : "—"}</p>
                  </div>
                  <div class="col col-3">
                    <p class="ellipsis">PM10</p>
                  </div>
                  <div class="col col-4 ${utils.validatePm10(data.pm10)}">
                    <p class="ellipsis">${data.pm10 ? data.pm10 : "—"}</p>
                  </div>
                </div>
                <div class="row row-4">
                  <div class="col col-1">
                    <p class="ellipsis">CO</p>
                  </div>
                  <div class="col col-2 ${utils.validateCo(data.co)}">
                    <p class="ellipsis">${data.co ? data.co : "—"}</p>
                  </div>
                  <div class="col col-3">
                    <p class="ellipsis">NO2</p>
                  </div>
                  <div class="col col-4 ${utils.validateNo2(data.no2)}">
                    <p class="ellipsis">${data.no2 ? data.no2 : "—"}</p>
                  </div>
                </div>
                <div class="row row-5">
                  <div class="col col-1">
                    <p class="ellipsis">SO2</p>
                  </div>
                  <div class="col col-2 ${utils.validateSo2(data.so2)}">
                    <p class="ellipsis">${data.so2 ? data.so2 : "—"}</p>
                  </div>
                  <div class="col col-3">
                    <p class="ellipsis">O3</p>
                  </div>
                  <div class="col col-4 ${utils.validateO3(data.o3)}">
                    <p class="ellipsis">${data.o3 ? data.o3 : "—"}</p>
                  </div>
                </div>
                <div class="row row-6">
                  <div class="col col-1">
                    <p class="ellipsis">更新时间</p>
                  </div>
                  <div class="col col-2">
                    <p class="ellipsis">${data.pubtime ? data.pubtime : "—"}</p>
                  </div>
                </div>
              </div>`;
}

export function getStationPopupTemplate(data) {
  return `<div class="container">
            <div class="row row-1">
              <div class="col col-1">
                <div class="row row-1">
                  <p class="ellipsis">${data.device.alias}</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.hourly.statsTime}</p>
                </div>
              </div>
              <div class="col col-2">
                <div class="row row-1 ${utils.validateAqi(data.hourly.aqi)}">
                  <div class="row row-1">
                    <p class="ellipsis">AQI</p>
                  </div>
                  <div class=" row row-2">
                    <p class="ellipsis">${Math.round(data.hourly.aqi)}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row row-2">
              <p class="ellipsis">${data.device.address}</p>
            </div>
            <div class="row row-3">
              <div class="col col-1">
                <div class="row row-1">
                  <p class="${utils.validatePm2_5(
                    data.hourly.pm25
                  )} ellipsis">PM2.5</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.hourly.pm25}</p>
                </div>
              </div>
              <div class="col col-2">
                <div class="row row-1">
                  <p class="${utils.validatePm10(
                    data.hourly.pm10
                  )} ellipsis">PM10</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.hourly.pm10}</p>
                </div>
              </div>
              <div class="col col-3">
                <div class="row row-1">
                  <p class="${utils.validateNo2(
                    data.hourly.no2
                  )} ellipsis">NO2</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.hourly.no2}</p>
                </div>
              </div>
              <div class="col col-4">
                <div class="row row-1">
                  <p class="${utils.validateSo2(
                    data.hourly.so2
                  )} ellipsis">SO2</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.hourly.so2}</p>
                </div>
              </div>
              <div class="col col-5">
                <div class="row row-1">
                  <p class="${utils.validateCo(data.hourly.co)} ellipsis">CO</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.hourly.co}</p>
                </div>
              </div>
              <div class="col col-6">
                <div class="row row-1">
                  <p class="${utils.validateO3(data.hourly.o3)} ellipsis">O3</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.hourly.o3}</p>
                </div>
              </div>
            </div>
            <div class="row row-4"></div>
            <div class="row row-5">
              <div class="col col-1">
                <p class="ellipsis">${data.hourly.temperature}℃</p>
              </div>
              <div class="col col-2">
                <p class="ellipsis">${data.hourly.humidity}%</p>
              </div>
              <div class="col col-3">
                <p class="ellipsis">${data.hourly.pressure}kPa</p>
              </div>
              <div class="col col-4">
                <p class="ellipsis">${utils.validateWindDirection(
                  data.hourly.windDirection,
                  data.hourly.windSpeed
                )}</p>
              </div>
              <div class="col col-5">
                <p class="ellipsis">${utils.validateWindSpeed(
                  data.hourly.windSpeed
                )}</p>
              </div>
            </div>
            <div class="row row-6">
              <div id="${data.echartsId}" class="echarts"></div>
            </div>
          </div>`;
}

export function getNewTaskPopupTemplate(data, timestamp) {
  let content = "";

  if (utils.validateIsNotEmpty(data)) {
    if (data.taskProcessList.length > 0) {
      let beforeTaskImageList = data.taskProcessList[0].taskImageList;
      let beforeTaskVideoList = data.taskProcessList[0].taskVideoList;

      if (beforeTaskImageList.length > 0 || beforeTaskVideoList.length > 0) {
        content += `<div class="row row-2">
                    <div class="row row-1">
                      <p>整改前</p>
                    </div>
                    <div class="row row-2">
                      <div id="${"before-task-swiper-" +
                        timestamp}" class="swiper-container">
                      <div class="swiper-wrapper">`;
        for (let length = 0; length < beforeTaskImageList.length; length++) {
          content += `<div class="swiper-slide">
                      <div class="table">
                        <div class="cell">
                          <img src="${beforeTaskImageList[length].path}" alt=""/>
                        </div>
                      </div>
                    </div>`;
        }

        for (let length = 0; length < beforeTaskVideoList.length; length++) {
          content += `<div class="swiper-slide">
                      <video
                        class="before-task-leaflet-video"
                        controls
                        preload="auto"
                        poster=""
                        data-setup="{}"
                        height="180"
                      >
                        <source
                          src="${beforeTaskVideoList[length].path}"
                          type="video/mp4"
                        />
                      </video>
                    </div>`;
        }

        content += `</div>
                    </div>
                  </div>
                </div>`;
      }
    }

    if (data.taskProcessList.length > 1) {
      let afterTaskImageList = data.taskProcessList[1].taskImageList;
      let afterTaskVideoList = data.taskProcessList[1].taskVideoList;

      if (afterTaskImageList.length > 0 || afterTaskVideoList.length > 0) {
        content += `<div class="row row-3">
                    <div class="row row-1">
                      <p>整改后</p>
                    </div>
                    <div class="row row-2">
                      <div id="${"after-task-swiper-" +
                        timestamp}" class="swiper-container">
                        <div class="swiper-wrapper">`;

        for (let length = 0; length < afterTaskImageList.length; length++) {
          content += `<div class="swiper-slide">
                      <div class="table">
                        <div class="cell">
                          <img src="${afterTaskImageList[length].path}" alt=""/>
                        </div>
                      </div>
                    </div>`;
        }

        for (let length = 0; length < afterTaskVideoList.length; length++) {
          content += `<div class="swiper-slide">
                      <video
                        class="after-task-leaflet-video"
                        controls
                        preload="auto"
                        poster=""
                        data-setup="{}"
                        height="180"
                      >
                        <source
                          src="${afterTaskVideoList[length].path}"
                          type="video/mp4"
                        />
                      </video>
                    </div>`;
        }

        content += `</div>
                    </div>
                   </div>
                </div>`;
      }
    }
  }

  return `<div class="container">
            <div class="row row-1">
              <p>地址：${data.address}</p>
              <p>描述：${data.content}</p>
            </div>
             ${content}
           </div>`;
}

export function getVehiclePopupTemplate(data, jsession, timestamp) {
  let control = formatterVehicleControlState(data.carControl);

  return `<div class="container">
            <div class="row row-1">
              <div class="row row-1">
                <p>车牌：${data.licensePlate}</p>
              </div>
              <div class="row row-2">
                <div class="col col-1">
                  <p>经度：${parseFloat(data.carCollection.lng)}</p>
                </div>
                <div class="col col-2">
                  <p>纬度：${parseFloat(data.carCollection.lat)}</p>
                </div>
              </div>
              <div class="row row-3">
                <div class="col col-1">
                  <p>风速：${
                    data.carCollection.windSpeed === "—"
                      ? "—"
                      : data.carCollection.windSpeed + "m/s"
                  }</p>
                </div>
                <div class="col col-2">
                  <p>风向：${
                    data.carCollection.windDirection === "—"
                      ? "—"
                      : data.carCollection.windDirection + "°"
                  }</p>
                </div>
              </div>
              <div class="row row-4">
                <p>工作时长：${
                  data.carCollection.nowUseTime === "—"
                    ? "—"
                    : data.carCollection.nowUseTime + "min"
                }</p>
              </div>
              <div class="row row-5">
                <div class="col col-1">
                  <p>用水量：${
                    data.carCollection.nowUseWater === "—"
                      ? "—"
                      : data.carCollection.nowUseWater + "t"
                  }</p>
                </div>
                <div class="col col-2">
                  <p>剩余水位：${
                    data.carCollection.waterLevel === "—"
                      ? "—"
                      : data.carCollection.waterLevel + "cm"
                  }</p>
                </div>
              </div>
              <div class="row row-4">
                <p>
                  电子降霾设备状态：
                  <span class="${
                    control.anionState === 0 ? "active" : "inactive"
                  }">
                    ${control.anionState === 0 ? "开启" : "关闭"}
                  </span>
                </p>
              </div>
              <div class="row row-4">
                <p>
                  水泵状态：
                  <span class="${
                    control.highPressurePumpState === 0 ? "active" : "inactive"
                  }">
                    ${control.highPressurePumpState === 0 ? "开启" : "关闭"}
                  </span>
                </p>
              </div>
              <div class="row row-4">
                <p>
                  风机状态：
                  <span class="${
                    control.fanState === 0 ? "active" : "inactive"
                  }">
                    ${control.fanState === 0 ? "开启" : "关闭"}
                  </span>
                </p>
              </div>
            </div>
            <div class="row row-2">
              <div class="col col-1">
                <video
                  muted
                  id="vehicle-leaflet-video-1-${timestamp}"
                  class="video-js vjs-default-skin vjs-big-play-centered vjs-4-3 vehicle-video"
                  controls
                  preload="auto"
                  poster=""
                  data-setup="{}"
                >
                  <source src="${"http://39.100.229.38:6604/hls/1_" +
                    data.videoId +
                    "_0_1.m3u8?JSESSIONID=" +
                    jsession}"
                  type="application/x-mpegURL" />
                </video>
              </div>
              <div class="col col-2">
                <video
                  muted
                  id="vehicle-leaflet-video-2-${timestamp}"
                  class="video-js vjs-default-skin vjs-big-play-centered vjs-4-3 vehicle-video"
                  controls
                  preload="auto"
                  poster=""
                  data-setup="{}"
                >
                  <source src="${"http://39.100.229.38:6604/hls/1_" +
                    data.videoId +
                    "_1_1.m3u8?JSESSIONID=" +
                    jsession}"
                  type="application/x-mpegURL" />
                </video>
              </div>
              <div class="col col-3">
                <video
                  muted
                  id="vehicle-leaflet-video-3-${timestamp}"
                  class="video-js vjs-default-skin vjs-big-play-centered vjs-4-3 vehicle-video"
                  controls
                  preload="auto"
                  poster=""
                  data-setup="{}"
                >
                  <source src="${"http://39.100.229.38:6604/hls/1_" +
                    data.videoId +
                    "_2_1.m3u8?JSESSIONID=" +
                    jsession}"
                  type="application/x-mpegURL" />
                </video>
              </div>
              <div class="col col-4">
                <video
                  muted
                  id="vehicle-leaflet-video-4-${timestamp}"
                  class="video-js vjs-default-skin vjs-big-play-centered vjs-4-3 vehicle-video"
                  controls
                  preload="auto"
                  poster=""
                  data-setup="{}"
                >
                  <source src="${"http://39.100.229.38:6604/hls/1_" +
                    data.videoId +
                    "_3_1.m3u8?JSESSIONID=" +
                    jsession}"
                  type="application/x-mpegURL" />
                </video>
              </div>
            </div>
          </div>`;
}
